import { Button, Input, Message, Modal } from '@arco-design/web-react';
import { useEffect, useState } from 'react';
import LoadingMask from '../../components/loadingMask';
import { dictTag } from '../../components/tableColumn';
import { getDict } from '../../utils/utils';
import { apiGetOtherDetail, apiCardDetailGdOpen, apiGetOtherChatDetail } from '../../api';
import { CardOrderDetail } from './refresh/types';

interface Props {
  id: number;
  iccid: string;
  onCancel: () => void;
}

const CARD_DETAIL_CARD_STATUS = 'card_detail_card_status';

export default function CardOtherDetailDialog({ id, iccid, onCancel }: Props) {
  const [dictDatas, setDictDatas] = useState<Record<string, any>>({});
  useEffect(() => {
    async function fetchDictData() {
      const data = await getDict(CARD_DETAIL_CARD_STATUS);
      setDictDatas(data);
    }

    fetchDictData();
  }, []);
  const [otherDetail, setOtherDetail] = useState<CardOrderDetail>({});
  const [oldImei, setOldImei] = useState<string>();
  const [newImei, setNewImei] = useState<string>();
  const [msg, setMsg] = useState<string>();
  useEffect(() => {
    otherDetailList();
  }, []); // eslint-disable-line

  async function otherDetailList() {
    LoadingMask.show('正在加载...');
    try {
      let res = await apiGetOtherChatDetail(id);
      let data = res.data;
      if (data.code === 200) {
        setOtherDetail(data.data ?? {});
      } else {
        setOtherDetail({});
        Message.warning(data.msg ?? '获取失败');
      }
    } catch (e: any) {
      Message.error(e.message ?? '获取失败');
    } finally {
      LoadingMask.hide();
    }
  }

  // 重新绑定
  async function handCardDetailGdOpen() {
    if (!oldImei) {
      return Message.error('原IMEI比填');
    }
    if (!newImei) {
      return Message.error('新IMEI比填');
    }
    LoadingMask.show('正在重新绑定...');
    try {
      let res = await apiCardDetailGdOpen({ iccid, oldImei, newImei });
      let data = res.data;
      if (data.code === 200) {
        otherDetailList();
      } else {
        Message.warning(data.msg ?? '重新绑定失败');
      }
      setMsg(data.msg);
    } catch (e: any) {
      Message.error(e.message ?? '重新绑定失败');
    } finally {
      LoadingMask.hide();
    }
  }

  const orderDetailList = [
    { value: 'onLine', label: '在网时间' },
    { value: 'amount', label: '累计消费金额' },
    { value: 'cardStatus', label: '卡片状态', dict: CARD_DETAIL_CARD_STATUS },
    { value: 'complainCount', label: '投诉次数' },
    { value: 'topAmount', label: '累计充值金额' },
    { value: 'topCount', label: '充值次数' },
    { value: 'lossCount', label: '亏损次数' },
    { value: 'refundAmount', label: '退款金额' },
    { value: 'arrivalAmount', label: '到账金额' },
    { value: 'averageAmount', label: '月均消费' },
    // { value: 'averageCost', label: '月均成本' },
    { value: 'convertCount', label: '换卡次数' },
    { value: 'guangDianCardStatus', label: '广电卡状态' },
  ];

  return (
    <Modal title="详细信息" visible={true} className="bw-80" onCancel={() => onCancel()} footer={<>
      <Button className="ml-20" onClick={() => {
        onCancel()
      }}>
        关闭
      </Button>
    </>}>
      <div className="d-flex-c flex-wrap h-350 scroll-bar-h-min">
        {orderDetailList &&
          orderDetailList.map((item, index) => (
            <div className="mb-20" key={index}>
              <span className="text-6-color">{item.label}: </span>
              {item.dict && <span>{dictTag(otherDetail[item.value], dictDatas[item.dict])}</span>}
              {!item.dict && <span >{otherDetail[item.value] ?? ''}</span>}
            </div>
          ))}
        {otherDetail.guangDianCardStatus && otherDetail.guangDianCardStatus === '机卡分离停机' && (
          <div className="d-flex-c">
            <Input
              className="mb-10 m-input mw-3"
              placeholder="原IMEI"
              value={oldImei}
              onChange={(v) => setOldImei(v)}
            />
            <Input
              className="mb-10 m-input mw-3"
              placeholder="新IMEI"
              value={newImei}
              onChange={(v) => setNewImei(v)}
            />
            <div className="mb-10 w-200 d-flex-c flex-wrap text-error-color">{msg}</div>
            <Button className="w-100" size="small" type="primary" onClick={() => handCardDetailGdOpen()}>
              重新绑定
            </Button>
          </div>
        )}
      </div>
    </Modal>
  );
}
